<template>
	<view class="content_">
		<view class="content_relevant">
			<view class="relevant">
				<button class="relevant_icon" open-type="share">
					<image src="https://z3.ax1x.com/2021/08/30/htkgeJ.png"></image>
				</button>
				<view class="relevant_portrait" @click="goSetting">
					<image :src="userObj.avatar"></image>
				</view>
				<!-- profession: '平面设计师',
					company: "亚洲吃面公司面粉厂厂长", -->
				<view class="relevant_portrait_">
					<view class="relevant_title">{{userObj.nickname}}</view>
					<view class="relevant_gender">{{userObj.gender == 1 ? '男性' : userObj.gender == 2 ? '女性' : '未知'}} ·
						{{userObj.age}}岁 · {{userObj.address}}
					</view>
					<view class="relevant_personality">{{userObj.company ? userObj.company : ''}}
						{{userObj.post ? userObj.post : ''}}
					</view>
					<view class="relevant_num" @click="goCalendar">
						<view class="relevant_font">{{userObj.amianCoin}}</view>
						<view>累计面值</view>
					</view>
				</view>
			</view>

			<!-- badgeList: Array(8)
				0:
				badgeId: 1
				badgeImage: "https://oss-images.lclook.com/upload/2021/09/03/1630660483404.png"
				badgeName: "响应"
				num: 12
				status: 1
				userBadgeId: 4
				userId: 9 -->
			<view class="relevant_operation">
				<view :class="(!isPath &&  newItem.num != 0) || isPath ? 'relevant_operation_' : ''"
					v-for="(newItem,newIndex) in userObj.badgeList" :key="newIndex">
					<view v-if="(!isPath &&  newItem.num != 0) || isPath" @click="ff_isPopup(newItem)">
						<image :class="(newItem.status == 2 || newItem.num == 0) ? 'dot' : ''"
							:src="newItem.badgeImage">
						</image>
						<view :style="{color: newItem.num == 0 ? '#979797' : '#fff'}">
							{{newItem.badgeName}}{{newItem.num == 0 ? '' : `${newItem.num}次`}}</view>
					</view>
				</view>
			</view>
		</view>

		
	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: 'callingcard',
				
			}
		},
		props: {
			isPath: {
				type: Boolean,
				default: false
			},
			userObj: {
				type: Object
			},

		},
		onLoad(params) {},
		methods: {
			ff_chacha(){
				// this.isPopup = false
				this.$emit("ff_ispsp")
			},
			ff_isPopup(data) {
                // debugger
				let popObj = {};
				popObj.url = data.badgeImage;
				popObj.title = data.badgeName;
				popObj.text = data.title;
				popObj.num = data.num
				this.$emit("ff_isPopup",popObj);
			},
			goCalendar() {

				if (this.isPath) {

					this.$emit('goCalendarPath')
				}

				// debugger

				// if(this.isPath){
				// 	debugger

				// }
			},
			goSetting() {
				if (this.isPath) {
					// debugger
					uni.navigateTo({
						url: "/pages/my/setting/setting"
					})
				}
			}
		}
	}
</script>

<style>


	.dot {
		filter: grayscale(100%);
		filter: gray;
	}

	.content_relevant {
		width: 670rpx;
		/* height: 496rpx; */
		background: #2d3034;
		border-radius: 6px;
		padding-bottom: 35rpx;
	}

	.relevant {
		position: relative;
		/* margin: 40rpx; */
		display: flex;
		align-items: center;
		padding: 40rpx 40rpx 8rpx 40rpx;
	}

	.relevant_icon {
		position: absolute;
		right: 0;
		top: 0;
		background-color: transparent;
		border: none;

	}
	.relevant_icon::after{
		border-color: transparent !important;
	}

	.relevant_icon image {
		    width: 36rpx;
		    height: 36rpx;
	}

	.relevant_portrait {
		display: inline-block;
	}

	.relevant_portrait_ {
		width: 500rpx;
		vertical-align: top;
		display: inline-block;
		    overflow: hidden;
	   
	}

	.relevant_portrait image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		margin-right: 30rpx;
		vertical-align: top;
	}

	.relevant_title {
		width: 100%;
		line-height: 44rpx;
		font-size: 30rpx;
		font-weight: 700;
		color: #FFFFFF;
		
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}

	.relevant_gender {
		color: #ffffff;
		font-size: 18rpx;
		font-weight: 400;
		margin-top: 4rpx;
		line-height: 26rpx;
		font-family: nominal;
	}

	.relevant_personality {
		/* width: 400rpx;
		color: rgba(255,255,255,0.70);
		font-size: 18rpx;
		font-weight: 400;
		line-height: 26rpx; */
		font-size: 18rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: LEFT;
		color: rgba(255, 255, 255, 0.70);
		height: 20rpx;
		line-height: 20rpx;
		
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
    .relevant_font{
		font-family: nominal;
	}
	.relevant_num {
		/* vertical-align: top; */
		margin-top: 6rpx;
		display: flex;
		align-items: center;
		
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}

	.relevant_num view {
		display: inline-block;
	}

	.relevant_num :first-child {
		color: #ff4341;
		font-size: 38rpx;
		margin-right: 4rpx;
	}

	.relevant_num :nth-child(2) {
		color: #ffffff;
		font-size: 18rpx;
	}

	.relevant_operation {
		margin: 0rpx 25rpx 0 25rpx;
	}

	.relevant_operation_xx {}


	.relevant_operation_ {
		/* width: 167rpx; */
		width: 155rpx;
		margin-top: 32rpx;
		/* margin-right: 72rpx; */
		display: inline-block;
		text-align: center;
		font-family: nominal;
	}

	.relevant_operation_ image {
		width: 68rpx;
		height: 68rpx;
	}

	.relevant_operation_ :nth-child(2) {
		margin-top: 2rpx;
		color: #ffffff;
		font-size: 18rpx;
	}

	.relevant_operation :nth-child(4) {
		margin-right: 0;
	}
</style>
